<template>
	<view class="content">
		<view class="skeleton" v-if="loadState">
			<wd-skeleton :row-col="[{ size: '48px', type: 'circle' }]" />
			<wd-skeleton :custom-style="{ width: '100%', marginLeft: '12px' }" animation="gradient" theme="paragraph" />
		</view>
		<view v-else>
			<!-- 标题区 -->
			<view class="title-bar">
				<text class="title">{{ title }}--{{ tab }}</text>
			</view>

			<!-- 作者区 -->
			<div @click="Author()">
				<view class="author-bar">
					<image class="avatar" :src="user_imgurl" />
					<view class="author-info">
						<text class="username">{{ username }}</text>
						<text class="bio">{{ timestampToDateTime(publish_date) }} · 发布于{{ province }}</text>
					</view>
				</view>
			</div>

			<!-- 内容区 -->
			<view class="content-area" style="white-space: pre-wrap;">
				<!--mp-html :content="richText" /-->
				{{richText}}
			</view>

			<!-- 点赞按钮区 -->
			<view class="like-button-bar">
				<button class="like-button" :class="isLike ? 'like-active' : ''" @click="onLike">
					<wd-icon name="thumb-up" size="34rpx"></wd-icon>
					<text v-if="like_count > 0">{{ like_count }}</text>
				</button>
			</view>

			<!-- 看过的人数区 -->
			<view class="view-count-bar">
				<text class="view-count">{{ view_count }}人看过</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				uid: '',
				isLike: false,
				loadState: true,
				articleId: null,
				title: "Title",
				user_imgurl: "default-avatar.png",
				username: "UserName",
				publish_date: '2025-01-24T00:00:00',
				province: "2025年1月24日00:00:00",
				richText: "Text",
				like_count: 0,
				view_count: 0,
				tab: "接妆",
			};
		},
		async onLoad(options) {
			// 获取传递过来的参数
			this.uid = uni.getStorageSync('uid');
			this.articleId = options.id;
			try {
				const res = await new Promise((resolve, reject) => {
					uni.request({
						url: 'http://14.103.233.198:9999/article?id=' + this.articleId + "&uid=" + this
							.uid, // 替换为实际的接口
						method: 'GET',
						success: (response) => resolve(response),
						fail: (error) => reject(error),
					});
				});

				const articles = res.data.data;
				console.log(articles);
				this.user_imgurl = articles.img;
				this.title = articles.title;
				this.username = articles.author.name;
				this.publish_date = articles.publishedAt;
				this.isLike = articles.isLike;
				this.like_count = articles.like_count;
				const tabs = {
					"tab1": "接妆",
					"tab2": "接毛",
					"tab3": "摄影",
					"tab4": "票代",
					"tab5": "道具师"
				}
				this.tab = tabs[articles.tab]
				const date = new Date(articles.publishedAt);
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hours = date.getHours();
				const minutes = date.getMinutes();
				const seconds = date.getSeconds();
				this.province =
					`${year}年${month}月${day}日${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`
				this.richText = articles.content;
				this.loadState = false;
			} catch (error) {
				console.error("加载失败:", error);
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
			} finally {

			}
		},
		methods: {
			Author() {
				console.log("Author");
			},
			async onLike() {
				console.log("onLike", this.articleId);
				this.uid = uni.getStorageSync('uid');
				if (this.isLike) {
					const res = await new Promise((resolve, reject) => {
						uni.request({
							url: 'http://14.103.233.198:9999/unlike', // 替换为实际的接口
							method: 'GET',
							data: {
								uid: this.uid,
								articles_id: this.articleId,
							},
							success: (response) => resolve(response),
						});
					});
				} else {
					const res = await new Promise((resolve, reject) => {
						uni.request({
							url: 'http://14.103.233.198:9999/like', // 替换为实际的接口
							method: 'GET',
							data: {
								uid: this.uid,
								articles_id: this.articleId,
							},
							success: (response) => resolve(response),
						});
					});
				}
				uni.navigateBack({
					delta: 1
				});

			},
			padZero(num) {
				return num < 10 ? '0' + num : num;
			},
			timestampToDateTime(date) {
				const now = new Date();

				// 确保传入的时间是本地时间
				const inputDate = new Date(date);

				// 获取两个时间的时间戳
				const diffInMilliseconds = now.getTime() - inputDate.getTime();
				const diffInMillisecondsWith8Hours = diffInMilliseconds + (8 * 60 * 60 * 1000);
				const seconds = Math.floor(diffInMillisecondsWith8Hours / 1000);
				const minutes = Math.floor(seconds / 60);
				const hours = Math.floor(minutes / 60);
				const days = Math.floor(hours / 24);
				if (days > 0) return `${days}天前`;
				if (hours > 0) return `${hours}小时前`;
				if (minutes > 0) return `${minutes}分钟前`;
				return `${seconds}秒前`;
			},
			// 其他方法

		}
	}
</script>

<style lang="scss" scoped>
	@import "./postDetail.scss"
</style>